<template>
  <div class="app-container">
    <h1>Echart</h1>
    <div id="echart" class="test-1">
      <Echart :options="chart3" :autoResize="true" />
    </div>
    <div id="echart2" class="test-1">
      <Echart :options="chartOption" :autoResize="true" />
    </div>
    <div id="echart3" class="test-1">
      <Echart :options="mapOption" :autoResize="true" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, onUnmounted } from "vue";
import Echart from "@/components/echarts/index.vue";
import { optionConfig } from "./optionConfig";
import { useChartOption } from "./hooks/useChartOption";
const { chartOption, mapOption } = useChartOption();

// 引入图表配置
let data = {
  title: "ECharts传值 示例",
};
// 写法一
const chart = ref(null);
chart.value = optionConfig(data);
//  写法二
const chart2 = reactive(optionConfig(data));
// 写法三
const chart3 = computed(() => optionConfig(data));
onMounted(() => {
  setTimeout(() => {
    console.log(mapOption.value);
  }, 1000);
});
onUnmounted(() => {});
</script>

<style lang="scss" scoped>
.test-1 {
  width: 100%;
  height: 500px;
  background-color: #241e65;
}
</style>
